<script setup>
    import { useCategoryStore } from '@/stores/category';

    const categoryStore = useCategoryStore()
</script>


<template>
            <div class="home-category">
                <ul class="menu">
                    <li v-for="item in categoryStore.categoryList" :key="item">
                        <a href="javascript:;">{{ item.name }}</a>
                        <a href="javascript:;" v-for="i in item.children.slice(0, 2)" :key="i">{{ i.name }}</a>
                        <div class="layer">
                            <h4>
                                分类推荐
                                <span>根据您的购买或浏览记录推荐</span>
                            </h4>
                            <ul>
                                <li v-for="i in item.goods" :key="i">
                                    <router-link :to="`/detail/${i.id}`">
                                        <img :src="i.picture" alt="">
                                        <div class="info">
                                            <p class="name ellipsis-2">{{i.name}}</p>
                                            <p class="desc ellipsis">{{i.desc}}</p>
                                            <span>
                                                <i>￥</i>
                                                {{i.price}}
                                            </span>
                                        </div>
                                    </router-link>
                                </li>
                            </ul>
                        </div>
                        
                    </li>
                  
                        
                   
                </ul>
            </div>
</template>


<style scoped lang="scss">
    .home-category{
        position: relative;
        width: 250px;
        height: 509.4px;
        background: rgba(0, 0, 0, .8);
        z-index: 99;
        .menu{
            li{
                text-align: center;
                line-height: 55.8px;
                &:hover{
                    background: #27ba9b;
                }
                // 
                &:hover .layer{
                    display: block;
                }
                a{
                    color: #fff;
                    margin-right: 4px;
                    &:first-child{
                        font-size: 16px;
                    }
                }

                .layer{
                    position: absolute;
                    left: 250px;
                    top: 0;
                    width: 990px;
                    height: 100%;
                    text-align: left;
                    padding: 0 15px;
                    background: rgba(255, 255, 255, .8);
                    display: none;
                    h4{
                        font-size: 20px;
                        font-weight: normal;
                        line-height: 80px;
                        span{
                            font-size: 16px;
                            color: #666;
                        }
                    }

                    ul{
                        display: flex;
                        flex-wrap: wrap;
                        li{
                            // 受父类li hover背景影响，必须清除背景色
                            &:hover{
                                background: none;
                            }
                            &:nth-child(3n){
                                margin-right: 0;
                            }
                            width: 310px;
                            height: 120px;
                            border: 1px solid #eee;
                            padding-left: 40px;
                            text-align: left;
                            margin-right: 15px;
                            margin-bottom: 15px;
                            a{
                                &:hover{
                                    background: #e3f9f4;
                                }
                                display: flex;
                                width: 100%;
                                height: 100%;
                                padding: 10px;
                                color: #333;
                                img{
                                    width: 95px;
                                    height: 95px;
                                }
                                .info{
                                    line-height: 24px;
                                    padding-left: 10px;
                                    .name{
                                        color: #666;
                                    }
                                    .desc{
                                        color: #999;
                                        width: 143px;
                                    }
                                    span{
                                        font-size: 22px;
                                        color: $priceColor;
                                        i{
                                            font-size: 16px;
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }
</style>